<template>
  <div class="app-container home">

    <!-- 首页 -->
    <el-row>
      <el-col :span="12">
        <div class="bingZhuangTuClass" id="bzt"></div>
      </el-col>
    </el-row>

  </div>

</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Eca",
  data() {
    return {

    }
  },
  created() {
    this.getBztData()
  },
  methods: {
    //调取接口获取数据
    getBztData() {
      getXX().then(res=>{
        console.log(res.data)
        this.initBingZhuangTu(res.data)
      })
    },
    //实例化饼状图
    initBingZhuangTu(echartsData){

      let chartDom = document.getElementById('bzt');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '故障率统计图',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data:echartsData ,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },

  }
}
</script>

<style scoped>

</style>
